<template>
	<div>
		<mu-card-media  >
          <img id="index-img2" :src="bg2" />
          		     
        </mu-card-media>
		<div id="user-info">
		  	<section class="img-sec" >
		  		<mu-card-media >
        			<img :src="headicon1" style="width: 100%;"/>
        		</mu-card-media>
        	</section> 
          <!--<mu-avatar style="margin-top:2rem" slot="left" :size="72" :iconSize="48" icon="perm_identity" color="blue500" backgroundColor="white"/><br/>-->
          <mu-flat-button :label="userInfo.C_USERALIAS" class="demo-flat-button" color="white" rippleColor="blue500"/>
          <!--<section class="back-home" @click="gotoAddress({path:'/'})"  >
	    		<mu-icon-menu icon="home" slot="right" style="position:absolute;top:0.3rem; color: white;"></mu-icon-menu>
	      </section>-->
        </div>
        
        <mu-list>
        	<mu-sub-header></mu-sub-header>
		      <!--<mu-list-item disableRipple :title="userInfo.C_USERALIAS" >
		         <mu-icon slot="left" value="perm_identity"  color="orange700"/>
		      </mu-list-item>-->
		      
		      
		     <mu-list-item title="个人中心"  class="list-line" @click="gotoAddress({path:'/personal-info'})">
		       <mu-icon slot="left" value="account_circle" color="#f26166"/>
		       <mu-icon slot="right" value="keyboard_arrow_right"/>
		     </mu-list-item>
		      
		     <!--<mu-list-item title="账号绑定"  class="list-line" @click="gotoAddress({path:'/bind-account'})">
		       <mu-icon slot="left" value="link" color="#919ceb"/>
		       <mu-icon slot="right" value="keyboard_arrow_right"/>
		     </mu-list-item>-->
		      
		      
		      <!--<mu-list-item disableRipple :title="userInfo.C_USERNAME" class="list-line">
		         <mu-icon slot="left" value="receipt"  color="orange700"/>
		         <mu-icon slot="right" value="keyboard_arrow_right"/>
		      </mu-list-item> -->
		      
		      <mu-list-item title="问题反馈" class="list-line" @click="gotoAddress({path:'/problem-feedback'})">
		         <mu-icon slot="left" value="feedback"  color="orange700"/>
		         <mu-icon slot="right" value="keyboard_arrow_right"/>
		      </mu-list-item> 
		      
		      	<mu-list-item title="当前版本：V1.2.3" class="list-line" >
		         	<mu-icon slot="left" value="cached"  color="#99cef8"/>
		         	<!--<mu-icon slot="right" value="keyboard_arrow_right"/>-->
		      	</mu-list-item> 
		      
		      
		      	<mu-list-item title="修改密码"  class="list-line" @click="gotoAddress({path:'/ChangePassword'})">
		       		<mu-icon slot="left" value="lock_outline" color="#95d854"  />
		      	 	<mu-icon slot="right" value="keyboard_arrow_right"/>
		     	</mu-list-item>
		     	<!--<mu-list-item title="设置"  class="list-line" style="border: none;">
			       <mu-icon slot="left" value="settings" color="#429cce" />
			       <mu-icon slot="right" value="keyboard_arrow_right"/>
			     </mu-list-item>
			 -->
			</mu-list>
		
		<mu-list>
			<mu-list-item title="退出"  class="quit-btn" @click="loginOut()">
			       <mu-icon slot="left" value="power_settings_new" color="red"/>
			</mu-list-item>
		</mu-list>
		 
		<!--<div class="example-apptab" style="bottom:10px">
	        <mu-flat-button label="修改密码" class="demo-flat-button" style="float:left" icon="lock" href="#/ChangePassword" @click="toggle()"/>
	        <mu-flat-button label="退出" class="demo-flat-button" icon="power_settings_new" @click="logout()"/>
        </div>-->
	</div>
</template>
<script>
import axios from 'axios'
import * as types from './store/types'
export default {
	data () {
    return {
      open: false,
      docked: true,
      toast:false,
      edition:'当前版本：V1.2.0',
      message:'',
      userIdentity:'',
      isCommissary:false,
      version:localStorage.version,
      userInfo:{},
      bg2:'static/images/bg2.png',
      headicon1:'static/images/headicon1.jpg',
//    isShowthat:false
    }
  },
	computed:{
//		userInfo:function(){
//	      return this.$parent.userInfo
//	    }
	},
	mounted(){
		 let that=this
//	      that.userIdentity = localStorage.userIdentity
//	      that.isCommissary = localStorage.isCommissary=='true'
//	      console.info(localStorage.userIdentity)
//	      if(localStorage.userInfo!=null){
//	        that.userInfo = JSON.parse(localStorage.userInfo)
//	      }
//	        var objImg2=document.getElementById("index-img2")
//	    	var iconCont2=document.getElementById("user-info")
//	   		var objWidth2=document.body.offsetWidth;
//	   		var narWidth2=objImg2.naturalWidth
//	    	var narHeight2=objImg2.naturalHeight
//	    	var objHeight2=(objWidth2*narHeight2)/narWidth2
//	    	iconCont2.style.height=Math.ceil(objHeight2)+"px"
		 that.axios.get('static/version/version.js?t='+new Date().getTime()).then(function(response){
	      	let version=response.data
	        if(window.localStorage.version!=version){
	          that.edition='当前版本'
	        }
		  }).catch(function(error){
		      	console.log(error)
	      })
		 this.imgComplete()
	      
	},methods: {
		gotoAddress(path){
	        this.$router.push(path)
		  },
		loginOut(){
//			localStorage.removeItem('userNumber')
          	localStorage.removeItem('token')
//			localStorage.userNumber=null
			this.$router.push({
		        path: 'LoginPublic'
		    })
		},
	    logout(){
//      this.toggle()
//      this.isLogin = false
	      this.$store.commit(types.LOGIN, '')
	      localStorage.removeItem('token')
	      this.$router.push({
	        path: 'login'
	      })
	   },
	   imgComplete(){
	       	var objImg2=document.getElementById("index-img2")
	       	this.circleLoad(objImg2)
       },
       circleLoad(img){
   			var that=this
			var timer = setInterval(function() {
				if(img.complete) {
//					callback(img)
					that.getHeight()
					clearInterval(timer)
				}else{
				}
			}, 1)
       },
       getHeight(){
          	var objImg2=document.getElementById("index-img2")
	    	var iconCont2=document.getElementById("user-info")
	   		var objWidth2=document.body.offsetWidth;
	   		var narWidth2=objImg2.naturalWidth
	    	var narHeight2=objImg2.naturalHeight
	    	var objHeight2=(objWidth2*narHeight2)/narWidth2
	    	iconCont2.style.height=Math.ceil(objHeight2)+"px"
//	    	this.waitTodo()
//			console.info(objHeight2)
       }
      
       
	}
	
}

</script>
<style>
 .example-apptab{
    position: fixed !important;
    right: 0;
    bottom: 0;
    width: auto;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
  }
  #index-img2{
	display: block;
}
#user-info{
	position: absolute; 
	/*background-color:#51a2e7;*/ 
	color: white;
	z-index: 106; 
	width: 100%; 
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#icon-container section,#icon-container span{
	margin: 0.5rem 0;
}
.list-line{
	border-bottom: 1px solid #e4e4e4;
	/*height: 4rem;*/
	display: flex;
	align-items: center;
	background-color: white;
}  
.mu-item-wrapper{
	width:100% !important
}  
.quit-btn{
  	background-color: white;
  	/*height: 4rem;*/
  	display: flex;
	align-items: center;
}
 .img-sec{
	width: 5rem; 
	height: 5rem; 
	background-color: white; 
	border-radius: 50%; 
	overflow: hidden; 
	border:2px solid white
}
</style>